import { Form, Input, Button, Checkbox, message, } from 'antd'
import React, { useEffect, useRef } from 'react'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Link, withRouter } from 'react-router-dom'
import { reg } from '../../utils/validate';
import { ajax } from '../../api';


// 排版
const layout = {
  labelCol: {
    span: 4,
    offset: 2
  },
  wrapperCol: {
    span: 17,
    offset: 1
  }
}

const layout2 = {
  wrapperCol: {
    span: 17,
    offset: 7
  }
}
function LoginAccount(props: any) {
  //  const [form] = form.useForm
  const rform: any = useRef()
  const [form] = Form.useForm()
  const { history, location } = props
  useEffect(() => {
    //  console.log(rform.current.setFieldsValue)
    //  console.log(form);

    let account = new URLSearchParams(location.search).get('username')
    //  console.log(account);

    //  form.setFieldsValue({'account':account})
    rform.current.setFieldsValue({ 'account': account })
  }, [])
  const onFinish = async (v: any) => {
    console.log(v);

    let res = await ajax.loginusername(v)
    if (res.code == 200) {
      sessionStorage.setItem('token', res.token)
      localStorage.setItem('account', v.account)
      history.push('/main')
    }
  }
  const onFinishFailed = () => {
    message.destroy()
    message.error('请输入正确的登录信息')
  }
  return (
    <div>
      <Form
        name="normal_login"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        {...layout}
        ref={rform}
        form={form}
      >
        <Form.Item
          label="账号"
          name="account"
          rules={[{ required: true, message: '请输入账号' }]}
        >
          <Input prefix={<UserOutlined className='site-form-item-icon' />} placeholder="请输入账号" />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: '请输入密码' },
          { pattern: reg.pwd, message: '请输入6-16位的数字加字母组合' }]}
        >
          <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入密码" />
        </Form.Item>



        <Form.Item {...layout2}>
          <Button type="primary" block htmlType='submit'> 立即登录</Button>
        </Form.Item>

        <Form.Item {...layout2}>
          <div className="links" style={{ width: '100%', display: 'flex', justifyContent: "space-between" }}>
            <Link style={{ fontSize: 12, color: "#f50" }} to="/register"> 没有账号,立即注册?</Link>
            <Link style={{ fontSize: 12, color: "#0f0" }} to="/forgetpass"> 忘记密码?</Link>
          </div>
        </Form.Item>
      </Form>
    </div>
  )
}


export default withRouter(LoginAccount)